<template>
    <div class="address-info">
        <div class="address-list">
            <div class="item" v-for="item in 4" :key="item" @click="selectAddress(item)">
                <div class="circles">
                    <svg v-if="active === item" t="1668589934205" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3665" width="200" height="200">
                        <path
                            d="M512 128c211.2 0 384 172.8 384 384s-172.8 384-384 384-384-172.8-384-384 172.8-384 384-384m0-64C262.4 64 64 262.4 64 512s198.4 448 448 448 448-198.4 448-448-198.4-448-448-448z"
                            fill="#cccccc" p-id="3666"></path>
                        <path
                            d="M448 704c-12.8 0-25.6-6.4-32-12.8L313.6 588.8c-12.8-12.8-12.8-32 0-44.8s32-12.8 44.8 0L448 633.6l275.2-275.2c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8l-288 288c-6.4 12.8-19.2 12.8-32 12.8z"
                            fill="#cccccc" p-id="3667"></path>
                    </svg>
                    <svg v-else t="1668589727226" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3448" width="200" height="200">
                        <path
                            d="M512.54272 957.2608c-242.0736 0-438.30272-196.89984-438.30272-439.79776s196.22912-439.79776 438.30272-439.79776c242.06336 0 438.30272 196.89984 438.30272 439.79776S754.6112 957.2608 512.54272 957.2608zM510.17728 146.06848c-204.30848 0-369.90976 166.17984-369.90976 371.17952 0 204.99456 165.60128 371.17952 369.90976 371.17952 204.27264 0 369.8944-166.19008 369.8944-371.17952C880.07168 312.24832 714.44992 146.06848 510.17728 146.06848z"
                            p-id="3449" fill="#cccccc"></path>
                    </svg>
                </div>
                <div class="address">
                    <div class="info f15">
                        <span class="name">啊飒按首</span>
                        <span class="phone">12345678909</span>
                    </div>
                    <div class="detail f12">
                        广东省广州市天河区广东省-广州市-天河区-棠下街道达善大街81号
                    </div>
                </div>
            </div>
        </div>
        <div @click="addAddressHandle">
            <MyButton title="添加新地址"></MyButton>
        </div>
    </div>
</template>
<script>
import MyButton from "@/components/Address/Button.vue"
export default {
    name: "AddressInfo",
    data() {
        return {
            active: 1,
        }
    },
    components: {
        MyButton,
    },
    methods: {
        addAddressHandle() {
            this.$router.push({ name: "add-address" });
        },
        selectAddress(index) {
            this.active = index
        }
    }
}
</script>
<style lang="scss" scoped>
.address-info {
    background-color: #f7f7f7;
    min-height: 100vh;
    padding-bottom: 80px;

    .address-list {
        padding: 15px;

        .item {
            border-radius: 10px;
            overflow: hidden;
            padding: 20px 10px;
            background-color: white;
            display: flex;
            margin-bottom: 15px;

            .circles {
                width: 18px;
                height: 18px;
                flex-shrink: 0;
                margin-right: 10px;

                svg {
                    width: 100%;
                    height: 100%;
                }
            }

            .info {
                .name {
                    width: 100px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .detail {
                color: #979797;
            }
        }
    }
}
</style>